// html {
//   font-size: 13.33333vw
// }
// @media screen and (max-width: 320px) {
//   html {
//       font-size: 42.667PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 321px) and (max-width:360px) {
//   html {
//       font-size: 48PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 361px) and (max-width:375px) {
//   html {
//       font-size: 50PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 376px) and (max-width:393px) {
//   html {
//       font-size: 52.4PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 394px) and (max-width:412px) {
//   html {
//       font-size: 54.93PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 413px) and (max-width:414px) {
//   html {
//       font-size: 55.2PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 415px) and (max-width:480px) {
//   html {
//       font-size: 64PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 481px) and (max-width:540px) {
//   html {
//       font-size: 72PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 541px) and (max-width:640px) {
//   html {
//       font-size: 85.33PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 641px) and (max-width:720px) {
//   html {
//       font-size: 96PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 721px) and (max-width:768px) {
//   html {
//       font-size: 102.4PX;
//       font-size: 13.33333vw
//   }
// }

// @media screen and (min-width: 769px) {
//    html {
//       font-size: 102.4PX;
//       #app {
//           width: 768PX;
//           margin: 0 auto
//       }
//   }
// }

.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0
}
input,button,select,textarea{outline:none}

/* page change */
@p--transition-time: 350ms;
.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
will-change: transform;
transition: all @p--transition-time;
position: absolute;
height: 100%;
backface-visibility: hidden;
perspective: 1000;
}
.back-enter {
opacity: 0.75;
transform: translate3d(-35%, 0, 0)!important;
}
.back-enter-active {
z-index: -1!important;
transition: all @p--transition-time linear;
}
.back-leave-active {
transform: translate3d(100%, 0, 0)!important;
transition: all @p--transition-time linear;
}
.forward-enter {
transform: translate3d(100%, 0, 0)!important;
}
.forward-enter-active {
transition: all  @p--transition-time linear;
}
.forward-leave-active {
z-index: -1;
opacity: 0.65;
transform: translate3d(-35%, 0, 0)!important;
transition: all @p--transition-time linear;
}

.slide-left-leave-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-right-enter-active{
transition: all @p--transition-time;
}
.slide-left-enter, .slide-right-leave-active {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
